<script setup lang="ts">
import { ref } from 'vue'

const value = ref(0)
</script>

<template>
  <div class="home-page">
    <h3>父组件中的数据 : {{ value }}</h3>
    <!-- modelValue 是自定义的   -->
    <!-- <cp-test :modelValue="value" @update:modelValue="value = $event"></cp-test> -->
    <!-- 3.0 中 v-model的原理    -->
    <!-- :modelValue -->
    <!-- @update:modelValue -->

    <!-- 2.0 中 v-model的原理 -->
    <!-- :value  -->
    <!-- @input  -->

    <!-- 2.0 .sync -->
    <!-- :自定义的属性 -->
    <!-- @update:自定义的属性  -->

    <!-- 3.0 中 v-model 就是2.0中 .sync的升级版  -->

    <!-- <cp-test v-model="value"></cp-test> -->
    <h1>-----------------------</h1>
    <cp-test :test="value" @update:test="value = $event"></cp-test>

    <!-- :test="value" @update:test="value = $event"
    .test.sync = value


    v-model:test = “value” 
    
    ==== 2.0  :test.sync =value
    -->

    <cp-test v-model:test="value"></cp-test>
  </div>
</template>

<style lang="scss" scoped></style>
